<template>
  <a-drawer v-model:open="open"
            width="50%"
            :footer="null"
            :title="formState.id ? '编辑任解职记录' : '新增任解职记录'"
            :keyboard="false"
            :mask-closable="false"
            @close="handleClose"
            @cancel="handleClose">
    <a-form
        :model="formState"
        name="basic"
        class="mt20"
        layout="vertical"
        style="width: 100%;"
        ref="formRef"
        :rules="rules"
        :label-col=" { style: { width: '100%' } }"
        :wrapper-col="{ span: 24}"
        autocomplete="off"
    >
      <a-row :gutter="16">
        <a-col class="gutter-row" :span="8">
          <a-form-item required>
            <template #label>
              <span class="fw">任职船名</span>
            </template>
            <a-input class="w100" v-model:value.trim="formState.chuanBoMing" maxlength="100" placeholder="请填写"/>
          </a-form-item>
          <a-form-item>
            <template #label>
              <span class="fw">公司名称</span>
            </template>
            <a-input class="w100" v-model:value.trim="formState.gongSiMing" maxlength="100" placeholder="请填写"/>
          </a-form-item>
          <a-form-item >
            <template #label>
              <span class="fw">任职日期</span>
            </template>
            <a-date-picker class="w100" @change="handleChangeDate" v-model:value.trim="formState.renZhiRiQi" format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="请填写"/>
          </a-form-item>
          <a-form-item >
            <template #label>
              <span class="fw">解职资历来源</span>
            </template>
            <a-input class="w100" v-model:value.trim="formState.jieZhiZiLiLaiYuan" maxlength="100" placeholder="请填写"/>
          </a-form-item>
        </a-col>
        <a-col class="gutter-row" :span="8">
          <a-form-item >
            <template #label>
              <span class="fw">船舶等级</span>
            </template>
            <a-input class="w100" v-model:value.trim="formState.chuanBoDengJi" maxlength="100" placeholder="请填写"/>
          </a-form-item>
          <a-form-item >
            <template #label>
              <span class="fw">任职资历来源</span>
            </template>
            <a-input class="w100" v-model:value.trim="formState.renZhiZiLiLaiYuan" maxlength="100" placeholder="请填写"/>
          </a-form-item>
          <a-form-item >
            <template #label>
              <span class="fw">解职日期</span>
            </template>
            <a-date-picker class="w100" @change="handleChangeDate" v-model:value.trim="formState.jieZhiRiQi" format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="请填写"/>
          </a-form-item>
          <a-form-item >
            <template #label>
              <span class="fw">航区</span>
            </template>
            <a-input class="w100" v-model:value.trim="formState.hangQu" maxlength="100" placeholder="请填写"/>
          </a-form-item>
        </a-col>
        <a-col class="gutter-row" :span="8">
          <a-form-item required>
            <template #label>
              <span class="fw">任职职务</span>
            </template>
            <a-select
                ref="select"
                placeholder="请选择"
                allow-clear
                class="w100"
                v-model:value="formState.renZhiZhiwU"
            >
              <a-select-option v-for="item in zhiweiList" :key="item.id" :value="item.zhiWeiMing">
                {{ item.zhiWeiMing }}
              </a-select-option>
            </a-select>

          </a-form-item>
          <a-form-item >
            <template #label>
              <span class="fw">船舶种类</span>
            </template>
            <a-input class="w100" v-model:value.trim="formState.chuanBoZhongLei" maxlength="100" placeholder="请填写"/>
          </a-form-item>
          <a-form-item >
            <template #label>
              <span class="fw">任职天数</span>
            </template>
            <a-input class="w100" v-model:value.trim="formState.renZhiTianShu" maxlength="100" placeholder="请填写"/>
          </a-form-item>
        </a-col>
        <a-col class="gutter-row" :span="24">
          <div class="flex  pr ftp3">
            <a-button type="primary" @click="handleSubmit" :loading="addLoading" class="mr10">{{ formState.id ?'编辑':'保存' }}</a-button>
            <a-button type="default" @click="handleClose">取消</a-button>
          </div>
        </a-col>
      </a-row>
    </a-form>
  </a-drawer>
</template>
<script setup>
const zhiweiList = ref([])
const addLoading = ref(false);
const open = ref(false);
const formRef = ref({})
const roleArr = ref([])
const emits = defineEmits(["success"])
const formState = ref({
  chuanYuanId: "",
  chuanYuanName: "",
  gongSiMing: "",
  chuanBoMing: "",
  renZhiZhiwU: null,
  renZhiRiQi: null,
  renZhiZiLiLaiYuan: "",
  jieZhiRiQi: null,
  jieZhiZiLiLaiYuan: "",
  renZhiTianShu: "",
  chuanBoZhongLei: "",
  chuanBoDengJi: "",
  hangQu: "",
});

const handleChangeDate = () =>{
    if(formState.value.renZhiRiQi && formState.value.jieZhiRiQi) {
      var d1 = new Date(formState.value.renZhiRiQi)
      var d2 = new Date(formState.value.jieZhiRiQi)
      if(compareDates(d2,d1) == -1){
        useMessage().error("解职日期必须大于任职日期")
        formState.value.jieZhiRiQi = ""
        formState.value.renZhiTianShu = ""
        return;
      }
      formState.value.renZhiTianShu = calculateDateDiff(d1,d2)
    }
}

function calculateDateDiff(date1, date2) {
  let diff = Math.abs(date1.getTime() - date2.getTime());
  let diffDays = Math.ceil(diff / (1000 * 3600 * 24));
  return diffDays;
}


function compareDates(date1, date2) {
  const time1 = date1.getTime();
  const time2 = date2.getTime();

  if (time1 < time2) {
    return -1; // date1 is before date2
  } else if (time1 > time2) {
    return 1; // date1 is after date2
  } else {
    return 0; // date1 is equal to date2
  }
}

// 验证规则
const rules = {
  gongSiMing: [{required: true, message: '请输入账号', trigger: 'blur'}],
};

const handleSubmit = async () => {
  try {
    addLoading.value = true

    if (!handleValidate()) {
      return
    }

    await useSaveUpdateChuanYuanKuGongZuoApi(formState.value)
    addLoading.value = false
    useMessage().success("操作成功")
    handleClose()
    emits("success")
  } catch (e) {
    addLoading.value = false
    useMessage().error(e.msg)
  }
};

const handleValidate = () => {
  /*if(!formState.value.gongSiMing){
    useMessage().error("请输入公司名称")
    addLoading.value = false
    return false;
  }*/
  if(!formState.value.chuanBoMing){
    useMessage().error("请输入任职船名")
    addLoading.value = false
    return false;
  }
  if(!formState.value.renZhiZhiwU){
    useMessage().error("请输入任职职务")
    addLoading.value = false
    return false;
  }
  return true;
}

const handleLoadZhiweiData = async () => {
  var res = await useLoadChuanBoZhiWeiBiaoApi()
  zhiweiList.value = res.data
}

const handleOpen = async (record,cid,cname) => {
  open.value = true
  if(record && record.id){
    const res = await useGetChuanYuanKuGongZuoApi(record.id)
    formState.value = res.data
  }else{
    formState.value.chuanYuanId = cid
    formState.value.chuanYuanName = cname
    const resp = await useLoadChuanYuanKuGongZuoNewApi()
    if(resp.data){
      formState.value.gongSiMing =  resp.data.gongSiMing
      formState.value.chuanBoMing =  resp.data.chuanBoMing
      formState.value.hangQu =   resp.data.hangQu
      formState.value.chuanBoZhongLei = resp.data.chuanBoZhongLei
      formState.value.chuanBoDengJi = resp.data.chuanBoDengJi
    }
  }
  handleLoadZhiweiData()
}


const handleClose = () => {
  roleArr.value = []
  formState.value = {
    id: "",
    chuanYuanId: "",
    chuanYuanName: "",
    gongSiMing: "",
    chuanBoMing: "",
    renZhiZhiwU: null,
    renZhiRiQi: null,
    renZhiZiLiLaiYuan: "",
    jieZhiRiQi: null,
    jieZhiZiLiLaiYuan: "",
    renZhiTianShu: "",
    chuanBoZhongLei: "",
    chuanBoDengJi: "",
    hangQu: "",
  }
  open.value = false
}

defineExpose({
  handleOpen
})
</script>

<style lang="scss" scoped>
.full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }

  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
    overflow: auto;
    border-radius: 0px;
  }

  :where(.css-dev-only-do-not-override-1hsjdkk).ant-modal .ant-modal-header {
    background: transparent;
  }

  .ant-modal-body {
    flex: 1;
  }
}
</style>
